<template>
	<div style="margin: 10px 30px">
		<template v-if="urlQueryParams?.planNo">
			<span
				>门店: {{ urlQueryParams?.storeNo
				}}{{ urlQueryParams?.storeName }}</span
			>
			<span
				style="display: inline-block; margin-left: 100px"
				v-if="urlQueryParams?.planType === '0'"
				>课别: {{ urlQueryParams?.sectionName }}</span
			>
		</template>
		<span v-else>课别陈列图: {{ urlQueryParams?.planNo }}</span>
	</div>
	<div class="toolbar flex-1">
		<el-tooltip
			class="item"
			effect="dark"
			content="快捷键 CTRL+Z"
			placement="bottom"
		>
			<el-button icon="RefreshLeft" @click="undoHandle">撤消</el-button>
		</el-tooltip>
		<el-tooltip
			class="item"
			effect="dark"
			content="快捷键 CTRL+Y"
			placement="bottom"
		>
			<el-button icon="RefreshRight" @click="redoHandle">重做</el-button>
		</el-tooltip>

		<el-tooltip
			class="item"
			effect="dark"
			content="快捷键 CTRL+L"
			placement="bottom"
		>
			<el-button :disabled="lockFlag" icon="Lock" @click="lockHandle(10)"
				>锁定</el-button
			>
		</el-tooltip>
		<el-tooltip
			class="item"
			effect="dark"
			content="快捷键 CTRL+U"
			placement="bottom"
		>
			<el-button :disabled="!lockFlag" icon="Unlock" @click="lockHandle(0)"
				>解锁</el-button
			>
		</el-tooltip>
	</div>

	<div class="toolbar flex items-center">
		<el-tooltip
			class="item"
			effect="dark"
			content="快捷键 CTRL+P"
			placement="bottom"
		>
			<el-button icon="View" @click="showPreviewHandle">预览</el-button>
		</el-tooltip>
		<el-tooltip
			class="item"
			effect="dark"
			content="快捷键 CTRL+S"
			placement="bottom"
		>
			<el-button icon="Finished" @click="saveHandle">保存</el-button>
		</el-tooltip>
		<div class="scale-config">
			<el-select v-model="scaleRatio" @change="changeScaleHandle">
				<el-option
					v-for="item in scaleOptions"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				></el-option>
			</el-select>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref, defineEmits } from "vue";
import { storeToRefs } from "pinia";
import { LockState } from "@topology/core";
import useCommon from "@/src/store/common";
import useTopology from "@/src/store/topology";
import useScaleOptions from "@/src/hooks/useScaleOptions";
import useZoomCanvas from "@/src/hooks/useZoomCanvas";

const commonStore = useCommon();
const topologyStore = useTopology();
const { urlQueryParams } = storeToRefs(commonStore);
const { topology } = storeToRefs(topologyStore);
const emits = defineEmits(["showPreview"]);
const lockFlag = ref(false);
const scaleOptions = useScaleOptions();
const {scaleRatio, changeScaleHandle} = useZoomCanvas('topology')
// 撤销
function undoHandle() {
	topology.value?.undo();
}
// 重做
function redoHandle() {
	topology.value?.redo();
}
// 锁定
function lockHandle(type: LockState) {
	lockFlag.value = type === 0 ? false : true;
	topology.value?.lock(type);
}
// 缩放画布
// function changeScaleHandle() {
// 	let curScale = scaleRatio.value / 100;
// 	commonStore.rulerConfig.maxScaleVal = 5 * curScale;
// 	commonStore.rulerConfig.minSpace = 5 * curScale;
// 	topology.value?.scale(curScale);
// }
function showPreviewHandle() {
	emits("showPreview");
}
// 保存
function saveHandle() {
	console.log(topology.value);
	console.log(topology.value?.data());
}
</script>

<style lang="less" scoped>
.toolbar {
	.el-button {
		border: none !important;
		i {
			font-weight: bold;
			font-size: 16px;
		}
	}
	.el-button + .el-button {
		margin-left: 0;
	}
}
.scale-config {
	width: 100px;
	border: none;
	::v-deep {
		.el-select__caret {
			font-size: 10px !important;
			font-weight: bold !important;
			color: #333 !important;
		}
		.el-select {
			width: 82px;
			.el-input {
				border: 0;
				color: #000;
			}
			//margin-left: 60px;
		}
	}
}
.toolbar__con {
	flex: 1;
	display: flex;
	justify-content: space-between;
}

.canvas-config .toolbar {
	padding: 2px 10px;
	white-space: nowrap;
	//overflow-x: auto;
	background: #fff;
	border-bottom: 1px solid #ddd;
}
</style>
